<template>
  <el-container class="home">
    <!-- 头部区域 -->
    <el-header>
      <HomeHeader
        :imgUrl="this.userInfo.staffPhoto"
        :logOut="this.exitUser"
        :userName="name"
        :departmentName="this.userInfo.departmentName"
      ></HomeHeader>
    </el-header>
    <!-- 主体部分 -->
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '250px'">
        <!-- 控制侧边栏展开关闭 -->
        <div id="icon" style="cursor: pointer" @click="changeCollapse">
          <i v-if="isCollapse" class="el-icon-s-unfold"></i>
          <i v-else class="el-icon-s-fold"></i>
        </div>
        <el-row class="tac">
          <el-col>
            <!-- 菜单区 -->
            <HomeSider :menus="this.menus" :isCollapse="this.isCollapse"></HomeSider>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <!-- 对应侧边栏页面 二级路由出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex'
import HomeSider from './cpns/home-sider.vue'
import HomeHeader from './cpns/home-header.vue'
export default {
  name: 'home',
  data() {
    return {
      menusData: [],
      isCollapse: false,
      imgSrc: '',
    }
  },
  methods: {
    // 解构 getUserInfoActions  logOutActions
    ...mapActions('userStore', ['getUserInfoActions', 'logOutActions']),
    // 退出用户
    exitUser() {
      this.logOutActions()
      this.$router.replace('/login')
      this.$message({
        message: '你已退出',
        type: 'success',
      })
    },
    // 侧边栏的缩放
    changeCollapse() {
      this.isCollapse = !this.isCollapse
      // console.log(this.$route)
    },
  },
  computed: {
    // 获取userStore侧边栏列表
    ...mapGetters(['menus', 'name']),
    // 获取userStore用户列表
    ...mapState('userStore', ['userInfo']),
  },
  components: { HomeSider, HomeHeader },
}
</script>

<style lang="less" scoped>
.home {
  height: 100%;
}
.el-header {
  padding: 0 60px;
  text-align: center;
  line-height: 60px;
  background-color: var(--themeBackColor);
}
.el-aside {
  background-color: var(--themeBackColor);
  #icon {
    text-align: center;
    background-color: var(--themeBackColor);
    i {
      font-size: 35px;
      color: var(--themeColor);
    }
  }
}
.el-main {
  background-color: var(--themeMainBackColor);
}
</style>